<template>
  <!-- <img src="../../assets/img/微信图片_20220621105214.jpg" alt="" class="bgs" /> -->
  <!-- background: url(../../assets/img/9528ce65e55ab3c2143f39ec8d41237.png)
    no-repeat center center; -->
  <div class="back">
    <div class="sign">
      <div class="logo"></div>
      <div class="item">
        <div class="portrait"></div>
        <input type="text" v-model="user" placeholder="请输入账号手机号" />
      </div>
      <div class="item">
        <div class="portrait-date"></div>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </div>

      <el-button
        text
        @click="login"
        v-loading.fullscreen.lock="fullscreenLoading"
        type="primary"
        class="lol"
        >登录
      </el-button>
      <div class="last">
        <div>———其他方式登录———</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, watch, ref } from "vue";
import { loginApi } from "@/api/api";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import { ElLoading } from "element-plus";
const router = useRouter();
// 登录成功加载
const fullscreenLoading = ref(false);
const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    // background: "rgba(0, 0, 0, 0)",
  });
  setTimeout(() => {
    loading.close();
  }, 1000);
};
// 密码错误消息提示
const open = () => {
  ElMessageBox.alert("用户名或者密码错误", "Title", {
    autofocus: false,
    confirmButtonText: "OK",
    callback: (action: Action) => {},
  });
};
// 双向绑定用户名和密码
let user = ref<string>("");
let password = ref<string>("");
let userObj: any = {
  phone: "",
  password: "",
};

// 登录获取用户名和密码
const login = async () => {
  // 登录获取用户名和密码
  userObj.phone = user.value;
  userObj.password = password.value;
  // 核对用户名和密码
  const data = await loginApi(userObj);
  console.log(data.data.statusObj.token);

  if (data.data.statusObj.token == "666") {
    // 存储token
    sessionStorage.setItem("token", data.data.statusObj.token);
    openFullScreen2();
    setTimeout(() => {
      router.push("/home/workspace");
    }, 1000);
  } else {
    open();
    console.log("登录失败");
  }
};
</script>
<style lang="less" scoped>
// .bgs {
//   width: 100%;
//   height: 100%;
//   position: fixed;
//   background: url(../../assets/img/微信图片_20220621105214.jpg) no-repeat 100%;
//   object-fit: cover;
// }

// 加载
body {
  margin: 0;
}

.example-showcase .el-loading-mask {
  z-index: 9;
}

// 消息提示
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}

.back {
  height: 100%;
  width: 100%;
  background-image: url("../../assets/img/v2-3afad658b44f596b10ec13b2b6d4299d_720w.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;

  .sign {
    width: 400px;
    height: 400px;
    background-color: #f5f5f5;
    margin-top: 100px;
    margin-left: 900px;
    border-radius: 40px;

    .logo {
      width: 400px;
      height: 80px;
      background: url(../../assets/img/1c8b9fa3a7d3883ca06e497c44db364.png)
        no-repeat center;
      background-size: cover;
    }

    .item {
      display: flex;
      margin-top: 10px;

      .portrait {
        background: url(../../assets/img/用户.png) no-repeat center;
        width: 40px;
        height: 40px;
        background-size: cover;
        margin-top: 20px;
        margin-left: 40px;
      }

      .portrait-date {
        background: url(../../assets/img/密码.png) no-repeat center;
        width: 40px;
        height: 40px;
        background-size: cover;
        margin-top: 20px;
        margin-left: 40px;
      }

      input[type="text"],
      input[type="password"] {
        border: 2px solid rgb(128, 125, 125);
        width: 200px;
        box-sizing: border-box;
        border-radius: 10px;
        height: 40px;
        text-indent: 1em;
        font-size: 14px;
        font-weight: bolder;
        color: black;
        margin: 20px 30px;

        // text-align: center;
      }
    }

    .verification {
      display: flex;

      .portrait-yell {
        background: url(../../assets/img/验证码.png) no-repeat center;
        width: 40px;
        height: 40px;
        background-size: cover;
        margin-top: 20px;
        margin-left: 40px;
      }

      .ver {
        border: 1px solid #dcdfe6;
        width: 100px;
        box-sizing: border-box;
        border-radius: 3px;
        height: 40px;
        text-indent: 1em;
        font-size: 14px;
        color: black;
        margin: 20px 30px;
        background-color: #f5f5f5;
        text-align: center;
      }
    }

    button {
      width: 85px;
      height: 30px;
      margin: 25px 170px;
      font-size: 15px;
      font-weight: bold;
      border-radius: 10px;
      background-color: #dcdfe6;
      background-image: linear-gradient(
        95deg,
        rgba(114, 114, 202, 0.3),
        rgba(90, 187, 182, 0.5)
      );
    }

    .last {
      margin: 35px 50px;
      font-size: 15px;
      font-weight: bold;
      color: grey;
      text-align: center;
      margin-right: 20px;
    }
  }
}
</style>
